<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true">
      <template #title><text>全部评价</text></template>
    </GlobalTopBar>
    <GlobalTopBar ref="topBarRef" :isLeft="true"> </GlobalTopBar>
    <view class="page_content">
      <view class="topbar flex">
        <view
          class="tabs"
          :class="{ ac: indexs === index }"
          v-for="(item, index) in tabList"
          :key="index + 1"
          @click="indexs = index"
        >
          {{ item.name }}</view
        >
      </view>
      <scroll-view
        class="scroll-Y"
        scroll-y
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
        @scrolltolower="handleLoadMore"
        refresher-background="#f5f5f5"
        refresher-threshold="80"
      >
        <view class="libox" v-for="(item, index) in listData" :key="index + 1">
          <view class="flex top_flex">
            <view class="flex">
              <image class="head_img" :src="item.headimg" mode="scaleToFill" />
              <text>
                {{ item.nick_name }}
              </text>
            </view>
            <view class="xxbox">
              <image
                class="xx_img"
                v-for="(i, y) in 5"
                :key="y + 1"
                :src="
                  y < item.score
                    ? `${store.imgDomain}evaluate_1.png`
                    : `${store.imgDomain}evaluate_2.png`
                "
                mode="widthFix"
            /></view>
          </view>
          <view class="content_box">
            <view class="content">
              <view>{{ item.content }}</view>
              <view class="flex" style="margin-top: 20rpx" v-if="item.img">
                <image
                  v-for="(i, y) in item.img.split(',')"
                  @click="ylImgFun(y, item.img.split(','))"
                  class="wk_img"
                  :src="i"
                  mode="aspectFill"
                />
              </view>
              <view class="times">{{ item.create_at }}</view>
            </view>
          </view>
        </view>

        <view class="worder_box flex_center" v-if="!listData.length">
          <image :src="`${store.imgDomain}wpj_img.png`" mode="scaleToFill" />
          <text>暂无评价</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  nextTick,
  computed,
  reactive,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import Drawer from '@/components/Drawer.vue';
import { formatTimestamp } from '@/utils/validate';
import SearchInput from '@/components/SearchInput.vue';

const store = useCounterStore();
const goodsInfo = ref({});
const indexs = ref(0);
const datas = ref({});
const drawerRef = ref(null);
const drawerRef2 = ref(null);
const fuxqbox = ref(null);
const types = ref(2);
const goodsbyList = ref([]);
const bannerList = ref([]);
const service_guarantee_arr = ref([]);
const swiperHeight = ref(300);
const tabList = [
  {
    name: '全部',
    value: '',
  },
  {
    name: '好评',
    value: '5',
  },
  {
    name: '中评',
    value: '3',
  },
  {
    name: '差评',
    value: '1',
  },
];

// 列表数据相关
const listData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const isNext = ref(true);
// 状态控制
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态

watch(
  () => indexs.value,
  (val) => {
    getServiceOrderEvaluatListForGoods(true);
  },
);

const ylImgFun = (index, list) => {
  uni.previewImage({
    current: index,
    urls: list,
  });
};

// 获取服务项目对应的评价列表数据(分页)
const getServiceOrderEvaluatListForGoods = async (isRefresh = false) => {
  if (isRefresh) {
    pageNum.value = 1;
  }
  try {
    const data = await request(
      'wxapp/index/getServiceOrderEvaluatListForGoods',
      {
        goods_id: options.value.id,
        score: tabList[indexs.value].value,
        currpage: pageNum.value,
        pagesize: pageSize.value,
      },
    );
    isNext.value = data.page.isNext;
    if (isRefresh) {
      listData.value = [...data.list];
    } else {
      listData.value = [...listData.value, ...data.list];
    }
  } finally {
    isRefreshing.value = false;
    isLoading.value = false;
  }
};

// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  getServiceOrderEvaluatListForGoods(true);
};

// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  getServiceOrderEvaluatListForGoods();
};
const options = ref({});
onLoad((option) => {
  options.value = option;
  getServiceOrderEvaluatListForGoods(true);
});
</script>

<style scoped lang="scss">
.topbars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 11;
  background-color: #fff;
}
.page-container {
  background-color: #eaf2fc;
}
.page_content {
  box-sizing: border-box;
  padding: 20rpx;
}

.topbar {
  margin-bottom: 20rpx;
  .tabs {
    padding: 10rpx 20rpx;
    background-color: #f5f5f7;
    border-radius: 20rpx;
    margin-right: 20rpx;
    &.ac {
      border: 1rpx solid #4889ff;
      color: #4889ff;
      background-color: #eef5ff;
    }
  }
}
.libox {
  margin-bottom: 20rpx;
  .top_flex {
    justify-content: space-between;
    .head_img {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      margin-right: 30rpx;
    }
    text {
      margin-right: 20rpx;
    }
    .xx_img {
      width: 25rpx;
      margin: 0 5rpx;
    }
  }
  .content_box {
    box-sizing: border-box;
    padding-left: 70rpx;
  }
  .content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
  }
  .times {
    margin-top: 20rpx;
    color: $uni-text-color-grey;
  }
}

.wk_img {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.worder_box {
  flex-direction: column;
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  image {
    width: 242rpx;
    height: 247rpx;
    margin-bottom: 10rpx;
  }
  text {
    color: $uni-text-color-grey;
  }
}
.scroll-Y {
  position: relative;
  height: 80vh;
}
</style>
